
import React from 'react';

import memo from '../../common/wrapMemo';

import style from './Zoom.module.scss';

const {CENTER, ZOOM} = window.CONFIG;

const Zoom = memo((props) => {
    const {map} = props;

    const addZoom = () => {
        map && map.zoomIn();
    };

    const decZoom = () => {
        map && map.zoomOut();
    };

    const resetMap = () => {
        map && map.setView([CENTER[1], CENTER[0]], ZOOM);
    };

    return (
        <div className={style.zoom}>
            <span onClick={resetMap} className={style.reset}>
                <i className='iconfont icon-location'></i>
            </span>
            <div className={style.zoomBtns}>
                <span onClick={addZoom}>
                    <i className='iconfont icon-zoom-in'></i>
                </span>
                <span onClick={decZoom}>
                    <i className='iconfont icon-zoom-out'></i>
                </span>
            </div>
        </div>
    )
});

export default Zoom;